<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <div  class="host-body">
        <dv-menu :menus="menus" title="分布式系统故障诊断平台" @select="selectMenu"/>
        <dv-loading v-if="loading" style="margin-top: 20%;">Loading...</dv-loading>
        <div class="body-box" v-else>
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import dvMenu from '@/components/dv-menu'
import drawMixin from "@/utils/drawMixin";

export default {
  mixins: [drawMixin],
  components: {dvMenu},
  data() {
    return {
      loading: true,
      title: "分布式系统故障诊断平台",
      menus: [
        {title: "分布式系统故障诊断平台", path: "/"},
        {title: "模型管理", path: "/model"},
        {title: "数据管理", path: "/data"}
      ]
    }
  },
  mounted() {
    setTimeout(() => {
      this.loading = false
    }, 500)
    this.$router.push('/data')
  },
  methods: {
    selectMenu(menu) {
      this.loading = true
      this.title = menu.title
      this.$router.push(menu.path)
      setTimeout(() => {
        this.loading = false
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
#index {
  color: #d3d6dd;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;
}

#index .bg {
  width: 100%;
  height: 100%;
  padding: 16px 16px 0 16px;
  background-image: url("../assets/pageBg.png");
  background-size: cover;
  background-position: center center;
}

#index .host-body .body-box {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
}

#index .host-body .body-box .content-box {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

#index .host-body .body-box .bottom-box {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, 25%);
}
</style>